<%--
  Created by IntelliJ IDEA.
  User: 荔向荣
  Date: 2022/5/19
  Time: 8:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%--引入jstl核心标签库--%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%--    <link rel="stylesheet" href="to-top.css">--%>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
    <title>添加图书</title>
</head>
<body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<%--貌似换了个CDN加载速度会更快--%>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>

<%--multipart/form-data是将文件以二进制的形式上传，这样可以实现多种类型的文件上传--%>
<form onsubmit="return verify_form()" id="bookform" style="margin-left: 30%" enctype="multipart/form-data">
    <table class="table table-hover table-borderless">
        <tr>
            <td style="font-size: large" colspan="2"><strong>请输入书籍信息</strong></td>
        </tr>
        <tr>
            <td>图书序号:</td>
            <td><input type="text" class="form-control col-md-4" placeholder="图书序号" id="bkID"
                       name="bkID"
                       style="display: inline"><span id="bkIDSpan"
                                                     style="color: red;display: none">请输入图书序号且不重复</span></td>
        </tr>
        <tr>
            <td>书号:</td>
            <td><input type="text" class="form-control col-md-4" placeholder="bk开头且数字长度位3位" id="bkCode"
                       name="bkCode"
                       style="display: inline"><span id="bkCodeSpan"
                                                     style="color: red;display: none">书号输入不合法,请重新输入</span></td>
        </tr>
        <tr>
            <td>书名:</td>
            <td><input type="text" class="form-control col-md-4" placeholder="不能不填哦" id="bkName" name="bkName"
                       style="display: inline"><span id="bkNameSpan" style="color: red;display: none">请输入书名</span></td>
        </tr>
        <tr>
            <td>作者:</td>
            <td><input type="text" class="form-control col-md-4" placeholder="同上" id="bkAuthor" name="bkAuthor"
                       style="display: inline"><span id="bkAuthorSpan" style="color: red;display: none">作者是谁？</span>
            </td>
        </tr>
        <tr>
            <td>出版社:</td>
            <td><input type="text" class="form-control col-md-4" placeholder="只能是中文呢" id="bkPress" name="bkPress"
                       style="display: inline"><span id="bkPressSpan" style="color: red;display: none">出版社呢?</span></td>
        </tr>
        <tr>
            <td>出版日期:</td>
            <td><input type="text" class="form-control col-md-4" placeholder="出版日期(例：2001-12-21)" id="bkPressDate"
                       name="bkPressDate"
                       style="display: inline"><span id="bkPressDateSpan"
                                                     style="color: red;display: none">什么时候出版的啊?</span></td>
        </tr>
        <tr>
            <td>ISBN:</td>
            <td><input type="text" class="form-control col-md-4" placeholder="ISBN号" id="bkISBN" name="bkISBN"
                       style="display: inline"><span id="bkISBNSpan" style="color: red;display: none">ISBN去哪了啊?</span>
            </td>
        </tr>
        <tr>
            <td>语言:</td>
            <td><select name="bkLanguage" id="bkLanguage" class="form-control col-md-3" >
                <option value="中文" >中文</option>
                <option value="英文" >英文</option>
                <option value="日文" >日文</option>
                <option value="俄文" >俄文</option>
                <option value="德文" >德文</option>
                <option value="法文" >法文</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>页数:</td>
            <td><input type="text" class="form-control col-md-4" placeholder="页数" id="bkPages" name="bkPages"
                       style="display: inline"><span id="bkPagesSpan" style="color: red;display: none">多少页啊?</span></td>
        </tr>
        <tr>
            <td>价格:</td>
            <td><input type="number" placeholder="不可为负数" class="form-control col-md-4" id="bkPrice" name="bkPrice"
                       style="display: inline"><span id="bkPriceSpan" style="color: red;display: none">怎么卖的？</span></td>
        </tr>
        <tr>
            <td>入馆日期:</td>
            <td><input type="text" placeholder="入馆日期(例：2001-12-21)" class="form-control col-md-4" id="bkDateIn"
                       name="bkDateIn"
                       style="display: inline"><span id="bkDateInSpan" style="color: red;display: none">啥时候入馆的</span>
            </td>
        </tr>
        <tr>
            <td>上传封面:</td>
            <td><input type="file" name="bkPic" accept="image/jpeg,image/jpg,image/png" id="bkPic">
                <img id="show_img" style="display: none;width: 200px;height: 200px" alt="暂无" src=""></td>
        </tr>
        <tr>
            <td>
                添加简介:
            </td>
            <td>
                <div style="position:relative;padding-bottom:20px">
                    <textarea onkeyup="rest_words(this,300,'input_words')" placeholder="请输入书籍简介信息" style="resize: none"
                              maxlength="300" rows="5" cols="10" class="form-control col-md-5" id="bkBrief"
                              name="bkBrief"></textarea>
                    <span id="input_words"
                          style="color:#cc24e6;text-align: end ;font-size:14px;position:absolute;height:20px;left:300px;bottom:0;">它的简介呢？</span>
                </div>
            </td>
            <script>
                function rest_words(obj, maxlength, id) {
                    var num = maxlength - obj.value.length;
                    var leng = id;
                    if (num < 0) {
                        num = 0;
                    }
                    document.getElementById(leng).innerHTML = "剩余" + num + "/300" + "字符";
                }
            </script>
        </tr>
        <tr>
            <td><input type="reset" class="col-sm-5 btn btn-outline-danger" value="重置"></td>
            <%--    type改为button完美解决问题--%>
            <td><input id="addBook" type="button" class="col-sm-2 btn btn-outline-info" value="添加书籍"></td>
        </tr>
    </table>

</form>
</body>

<script>
    var getUserPhoto = document.getElementById("bkPic");
    getUserPhoto.onchange = function () {
        var file = this.files;
        console.log(file);
        var reader = new FileReader();
        reader.readAsDataURL(file[0]);
        reader.onload = function () {
            var image = document.getElementById("show_img");
            image.style.display = 'block'
            image.src = reader.result;
        };
    };
</script>

<%--js正则表达式验证--%>
<script>
    function verify_form() {
        const bkID = document.getElementById("bkID").value;
        const bkCode = document.getElementById("bkCode").value;
        const bkPrice = document.getElementById("bkPrice").value;
        const bkPress = document.getElementById("bkPress").value;
        const bkName = document.getElementById("bkName").value;
        const bkAuthor = document.getElementById("bkAuthor").value;
        const bkPressDate = document.getElementById("bkPressDate").value;
        const bkISBN = document.getElementById("bkISBN").value;
        const bkLanguage = document.getElementById("bkLanguage").value;
        const bkPages = document.getElementById("bkPages").value;
        const bkDateIn = document.getElementById("bkDateIn").value;
        const bkBrief = document.getElementById("bkBrief").value;
        // //书号验证
        var patterns = /^bk\d{3}?$/;
        // //出版社中文验证
        var reg = /^[\u4e00-\u9fa5]+$/;
        // //非负的浮点数验证
        var reg2 = /^\d+(\.\d+)?$/;
        if ("" === bkID) {
            // alert("书名都不填的吗?");
            document.getElementById("bkID").style.borderColor = "#ea0404";
            document.getElementById("bkIDSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("bkIDSpan").style.display = 'none';
                document.getElementById("bkID").style.borderColor = "#beb4b4";
            }, 1000)
            return false;
        }
        if (patterns.test(bkCode) === false) {
            // alert("书号输入不合法\n请重新输入");
            document.getElementById("bkCode").style.borderColor = "#ea0404";
            document.getElementById("bkCodeSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("bkCodeSpan").style.display = 'none';
                document.getElementById("bkCode").style.borderColor = "#beb4b4";
            }, 1500)
            return false;
        }
        if ("" === bkName) {
            // alert("书名都不填的吗?");
            document.getElementById("bkName").style.borderColor = "#ea0404";
            document.getElementById("bkNameSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("bkNameSpan").style.display = 'none';
                document.getElementById("bkName").style.borderColor = "#beb4b4";
            }, 1000)
            return false;
        }
        if ("" === bkAuthor) {
            // alert("作者也不填吗?");
            document.getElementById("bkAuthor").style.borderColor = "#ea0404";
            document.getElementById("bkAuthorSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("bkAuthorSpan").style.display = 'none';
                document.getElementById("bkAuthor").style.borderColor = "#beb4b4";
            }, 1500)
            return false;
        }
        if (reg.test(bkPress) === false) {
            // alert("出版社输入必须是中文");
            document.getElementById("bkPress").style.borderColor = "#ea0404";
            document.getElementById("bkPressSpan").innerHTML = "出版社必须是中文";
            document.getElementById("bkPressSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("bkPressSpan").style.display = 'none';
                document.getElementById("bkPress").style.borderColor = "#beb4b4";
            }, 1500)
            return false;
        }
        if ("" === bkPressDate) {
            document.getElementById("bkPressDate").style.borderColor = "#ea0404";
            document.getElementById("bkPressDateSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("bkPressDateSpan").style.display = 'none';
                document.getElementById("bkPressDate").style.borderColor = "#beb4b4";
            }, 1000)
            return false;
        }
        if ("" === bkISBN) {
            document.getElementById("bkISBN").style.borderColor = "#ea0404";
            document.getElementById("bkISBNSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("bkISBNSpan").style.display = 'none';
                document.getElementById("bkISBN").style.borderColor = "#beb4b4";
            }, 1000)
            return false;
        }
        if ("" === bkLanguage) {
            document.getElementById("bkLanguage").style.borderColor = "#ea0404";
            document.getElementById("bkLanguageSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("bkLanguageSpan").style.display = 'none';
                document.getElementById("bkLanguage").style.borderColor = "#beb4b4";
            }, 1000)
            return false;
        }
        if ("" === bkPages) {
            document.getElementById("bkPages").style.borderColor = "#ea0404";
            document.getElementById("bkPagesSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("bkPagesSpan").style.display = 'none';
                document.getElementById("bkPages").style.borderColor = "#beb4b4";
            }, 1000)
            return false;
        }
        //匹配的是不包含-9的
        if (reg2.test(bkPrice) === false) {
            // alert("价格不能有负号");
            document.getElementById("bkPrice").style.borderColor = "#ea0404";
            document.getElementById("bkPriceSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("bkPriceSpan").style.display = 'none';
                document.getElementById("bkPrice").style.borderColor = "#beb4b4";
            }, 1500)
            return false;
        }
        if ("" === bkDateIn) {
            document.getElementById("bkDateIn").style.borderColor = "#ea0404";
            document.getElementById("bkDateInSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("span").style.display = 'none';
                document.getElementById("bkDateIn").style.borderColor = "#beb4b4";
            }, 1000)
            return false;
        }
        if ("" === bkBrief) {
            document.getElementById("bkBrief").style.borderColor = "#ea0404";
            document.getElementById("bkBriefSpan").style.display = 'inline-block';
            setTimeout(function () {
                document.getElementById("bkBriefSpan").style.display = 'none';
                document.getElementById("bkBrief").style.borderColor = "#beb4b4";
            }, 1000)
            return false;
        }
        return true;
    }
</script>

<%--发送数据--%>
<script>
    $("#addBook").click(function () {
        // console.log($("#add_image")[0].files[0]);使用经典 DOM 选择器访问第一个选定的文件
        //HTML <form> 元素 — 指定后，FormData 对象将使用每个元素的 name 属性及其提交的值值填充窗体的当前键/值。它还将对文件输入内容进行编码。
        if (verify_form() === true) {
            if ($("#bkPic")[0].files.length === 0) {
                alert("请添加图片!")
                return;
            }
            //必须加个[0]转换为原生dom对象
            var formdata = new FormData($("#bookform")[0]);
            document.getElementById("bookform").reset();
            $("#show_img")[0].src = "";
            document.getElementById("show_img").style.display = 'none';
            $.ajax(
                {
                    url: "http://localhost:8080/addBookServlet",
                    type: 'POST',
                    data: formdata,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        console.log(data);
                        alert(data);
                        $("#bookform")[0].reset();
                        $("#show_img")[0].src = "";
                        document.getElementById("show_img").style.display = 'none';
                        $("#test1").load("add_book.jsp");
                    }
                }
            )
        }
    })
</script>

</html>